<template>
    <div>
        <h1 style="text-align: center; color:chocolate;">员工显示</h1>
        员工名称:<input type="text" v-model="htt.name">
        角色:<select v-model="htt.Juese">
                            <option :value="-1">请选择</option>
                            <option :value="1">管理员</option>
                            <option :value="2">部门经理</option>
                            <option :value="3">普通员工</option>

                        </select>

        <button class="btn btn-info" @click="chaxun">查询</button>

        <button class="btn btn-info" style="color:cornsilk;" @click="router.push('/employeeAdd')">新增</button>

        <button class="btn btn-info" @click="qiyong(true)">批量启用</button>
        <button class="btn btn-info" @click="jinyong(false)">批量禁用</button>
        <button class="btn btn-danger" @click="shanchu()">批量删除</button>
        <button class="btn btn-success" @click="daochu()">导出</button>


        <table class="table table-bordered" style="text-align: center;">
            <tbody>
                <tr>
                    <td>
                        <input type="checkbox" v-model="checked" @click="checkAll">
                    </td>
                    <td>序号</td>
                    <td>员工名称</td>
                    <td>员工编号</td>
                    <td>头像</td>
                    <td>手机号</td>
                    <td>角色</td>
                    <td>登录密码</td>
                    <td>状态</td>
                    <td>备注</td>
                    <td>操作</td>
                </tr>
                <tr v-for="item in chh.list" :key="item.Id">
                    <td>
                        <input type="checkbox" v-model="ids" :value="item.Id" @change="checkpo"> 
                    </td>
                    <td>{{item.Id}}</td>
                    <td>{{item.HouseName}}</td>
                    <td>{{item.Bianhao}}</td>
                    <td><img :src="item.Touxiang" width="100" height="100"></td>
                    <td>{{item.Shouji.substring(0,3)+'****'+item.Shouji.substring(7,3)}}</td>
                    <td>
                        <span>
                            <td v-if="item.Juese==1">
                                管理员
                            </td>
                            <td v-if="item.Juese==2">
                                部门经理
                            </td>
                            <td v-if="item.Juese==3">
                                普通员工
                            </td>
                        </span>
                    </td>
                    <td>******</td>
                    <td>{{item.Zhungtai==true?'启用':'禁用'}}</td>
                    <td>{{item.Biezhu}}</td>
                    <td>
                        <button class="btn btn-danger" @click="dele(item.Id)">删除</button>
                        <button class="btn btn-success" @click="update(item.Id)">修改</button>
                        <button class="btn btn-info" @click="fantian(item.Id)">反填</button>

                        <button class="btn btn-primary" v-if="item.Zhungtai==false" @click="zhunag(item.Id,true)">启用</button>
                        <button class="btn btn-danger" v-if="item.Zhungtai==true" @click="zhunag(item.Id,false)">禁用</button>
                    </td>
                </tr>
            </tbody>
        </table>

    </div>

    <p style="text-align: center;">
        <span>共{{chh.totocount}}条</span>
        <span>每页{{htt.PageSize}}条</span>
        <span>第{{htt.PageIndex}}/{{chh.totolpca}}页</span>


        <button class="btn btn-link" @click="fenye(1)">首页</button>
        <button class="btn btn-link" @click="fenye(htt.PageIndex-1)">上一页</button>
        <span class="btn btn-link" v-for="item in chh.totolpca" @click="fenye(item)">{{item}}</span>
        <button class="btn btn-link" @click="fenye(htt.PageIndex+1)">下一页</button>
        <button class="btn btn-link" @click="fenye(chh.totolpca)">尾页</button>
        <input type="number" v-model="htt.PageIndex">
        <button class="btn btn-info" @click="fenye(htt.PageIndex)">跳转</button>

    </p>
</template>

<script setup lang="ts">
import {ref,reactive,onMounted}from 'vue'
import axios from 'axios';
import { useRouter,useRoute } from 'vue-router';
import moment from 'moment';
import {useStore}from '@/stores/user'
const a=useStore();
const router=useRouter();
const route=useRoute();


let checked:any=ref(false)

let ids:any=ref([])


let htt:any=reactive({
    name:'',
    Juese:-1,
    PageIndex:1,
    PageSize:3
})

let chh:any=reactive({
    list:[],
    totocount:0,
    totolpca:0
})

//声明周期
onMounted(()=>{
    if(a.userIndex.Id){
        xianshi()
    }else{
        router.push('/Employeelogn')
    }
    
})


//导出
const daochu=()=>{
    location.href=`http://localhost:5025/api/Employee/Daochu?name=${htt.name}&Juese=${htt.Juese}&PageIndex=${htt.PageIndex}&PageSize=${htt.PageSize}`;
}


//批量删除
const shanchu=()=>{
    console.log(ids.value);
    if(ids.value.length==0){
        alert('必须选中一项')
        return;
    }

    axios({
        url:'/api/Employee/Housedele',
        method:'delete',
        params:{
            id:ids.value.toString(),
        }
    }).then(res=>{
        console.log(res);
        if(res.data>0){
            alert('删除成功')
            xianshi()
            checked.value=false
            ids.value=[]
        }else{
            alert('删除失败')
        }
        
    }).catch(err=>{
        console.log(err);
        
    })
   
    
}

//批量禁用
const jinyong=(stt:any)=>{
    console.log(stt);
    if(ids.value.length==0){
        alert('必须选中一项')
        return;
    }

    axios({
        url:'/api/Employee/Zhuangtai',
        method:'put',
        params:{
            id:ids.value.toString(),
            stost:stt
        }
    }).then(res=>{
        console.log(res);
        if(res.data>0){
            alert('禁用成功')
            xianshi()
            checked.value=false
            ids.value=[]
        }
        
    }).catch(err=>{
        console.log(err);
        
    })
   
    
}

//批量启用
const qiyong=(stt:any)=>{
    console.log(stt);
    if(ids.value.length==0){
        alert('必须选中一项')
        return;
    }

    axios({
        url:'/api/Employee/Zhuangtai',
        method:'put',
        params:{
            id:ids.value.toString(),
            stost:stt
        }
    }).then(res=>{
        console.log(res);
        if(res.data>0){
            alert('启用成功')
            xianshi()
            checked.value=false
            ids.value=[]
        }
        
    }).catch(err=>{
        console.log(err);
        
    })
   
    
}

//反选
const checkpo=()=>{
    console.log(ids.value);

    if(ids.value.length==chh.list.length){
        checked.value=true

    }else{
        checked.value=false

    }


    
    
}


//全选/全不选
const checkAll=()=>{
    checked.value=!checked.value

    if(checked.value==true){
        ids.value=chh.list.map((item:any)=>{
            return item.Id

        });

    }else{
        ids.value=[]

    }
}

//状态
const zhunag=(id:any,stst:any)=>{
    console.log(id);
    console.log(stst);

    axios({
        url:'/api/Employee/Zhuangtai',
        method:'put',
        params:{
            id:id,
            stost:stst
        }
    }).then(res=>{
        console.log(res);
        if(res.data>0){
            alert('状态修改成功')
            
            xianshi()
        }
        
        
    }).catch(err=>{
        console.log(err);
        
    })
    
    
}


//反填
const fantian=(id:any)=>{
    router.push({
        path:'/employeefantian',
        query:{
            id:id
        }
    })
}


//修改
const update=(id:any)=>{
    router.push({
        path:'/employeeUpdate',
        query:{
            id:id
        }
    })

}

//单删
const dele=(id:any)=>{
    console.log(id);
    if(confirm("确定删除吗")){
        axios({
            url:'/api/Employee/Housedele',
            method:'delete',
            params:{
                id:id
            }
        }).then(res=>{
            console.log(res);
            if(res.data>0){
                alert('删除成功')
                xianshi();
            }else{
                alert('删除失败')
            }
            
        }).catch(err=>{
            console.log(err);
            
        })
    }

    
}

//查询特殊处理
const chaxun=()=>{
    htt.PageIndex=1
    xianshi()

}

//分页
const fenye=(num:any)=>{
    console.log(chh.totolpca);

    if(num<1){
        htt.PageIndex=1;
        return;
    }

    if(num>chh.totolpca){
        num=chh.totolpca
        return;
    }


    htt.PageIndex=num
    xianshi()
}

//获取员工信息
const xianshi=()=>{
    console.log(chh);

    axios({
        url:'/api/Employee/HouseList',
        method:'get',
        params:htt
    }).then(res=>{
        console.log(res);
        Object.assign(chh,res.data)
        checked.value=false
        ids.value=[]
        
    }).catch(err=>{
        console.log(err);
        
    })
    
}

</script>

<style scoped>
button{
    margin: 0 5px;
}

span{
    margin: 0 5px;
}
</style>